<template>
    <div class="LogOn">
        <!-- 背景图 -->
        <div class="bg"></div>

        <div class="goHome" @click="goHome"><div></div></div>

        <!-- 标语 -->
        <div class="p-box">
            <p class="p1">登录网易云账号！</p>
            <p class="p2">Please login to your accounts</p>
        </div>

        <!-- 登录表单 -->
        <van-form @submit="getLogOn">
            <van-field
                v-model="user.phone"
                name="手机号"
                label="手机号"
                placeholder="手机号"
                autocomplete="off"
                center
                :class="{ field_bg: 0 === field_bg }"
                @focus="focus(0)"
                @blur="blur"
                :rules="[
                    {
                        required: true,
                        message: '请填写正确的手机号',
                        pattern: phoneReg,
                    },
                ]"
            />
            <van-field
                v-model="user.password"
                :type="user.isShow ? 'text' : 'password'"
                name="密码"
                label="密码"
                placeholder="密码"
                :right-icon="user.isShow ? 'eye-o' : 'closed-eye'"
                center
                autocomplete="off"
                :class="{ field_bg: 1 === field_bg }"
                @focus="focus(1)"
                @blur="blur"
                @click-right-icon="showPassword(true)"
                :rules="[
                    {
                        required: true,
                        message: '请填写正确的密码',
                        pattern: passwordReg,
                    },
                ]"
            />

            <!-- 跳转 找回密码 -->
            <div class="forget-box">
                <!-- @click="retrievePassword" -->
                <div class="forget">忘记密码？</div>
            </div>

            <!-- 登录按钮 -->
            <div>
                <van-button
                    round
                    block
                    type="info"
                    native-type="submit"
                    color="linear-gradient(to right,  #2b97fc,#e652d8)"
                    >登录</van-button
                >
            </div>
        </van-form>

        <!-- 弹出层 弹出按钮 -->
        <div style="margin: 50px 15px 0">
            <van-button
                round
                block
                type="default"
                @click="showPopup"
                :style="{
                    backgroundColor: 'rgba(255, 255, 255, 0.3)',
                    color: '#fff',
                    borderColor: '#999',
                }"
                >注册</van-button
            >
        </div>
        <!-- 弹出层 -->
        <van-popup
            v-model="show"
            position="bottom"
            :style="{ height: '100%' }"
            closeable
        >
            <p class="p3">注册</p>

            <!-- 注册表单 -->
            <van-form @submit="getRegister">
                <van-field
                    v-model="userRegister.phone"
                    name="手机号"
                    label="手机号"
                    placeholder="手机号"
                    autocomplete="off"
                    center
                    :class="{ field_bg: 2 === field_bg }"
                    @focus="focus(2)"
                    @blur="blur"
                    :rules="[
                        {
                            required: true,
                            message: '请填写正确的手机号',
                            pattern: phoneReg,
                        },
                    ]"
                />
                <van-field
                    v-model="userRegister.password"
                    :type="userRegister.isShow ? 'text' : 'password'"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :right-icon="userRegister.isShow ? 'eye-o' : 'closed-eye'"
                    center
                    autocomplete="off"
                    :class="{ field_bg: 3 === field_bg }"
                    @focus="focus(3)"
                    @blur="blur"
                    @click-right-icon="showPassword(false)"
                    :rules="[
                        {
                            required: true,
                            message: '必须以字母开头,6-16位字母数字下划线组合',
                            pattern: passwordReg,
                        },
                    ]"
                />
                <van-field
                    v-model="userRegister.nickName"
                    center
                    type="text"
                    name="昵称"
                    label="昵称"
                    placeholder="昵称"
                    autocomplete="off"
                    :class="{ field_bg: 4 === field_bg }"
                    @focus="focus(4)"
                    @blur="blur"
                    :rules="[
                        {
                            required: true,
                            message: '1-16位中英文数字下划线组合',
                            pattern: nicknameReg,
                        },
                    ]"
                />

                <van-field
                    v-model="userRegister.verification"
                    center
                    clearable
                    autocomplete="off"
                    label="验证码"
                    placeholder="验证码(4个字符)"
                    :class="{ field_bg: 5 === field_bg }"
                    @focus="focus(5)"
                    @blur="blur"
                    :rules="[
                        {
                            required: true,
                            message: '请填写正确的验证码',
                            pattern: verificationReg,
                        },
                    ]"
                >
                    <!-- 发送验证码按钮 -->
                    <template #button>
                        <van-button
                            class="letterSpacing0"
                            size="small"
                            type="button"
                            color="#5766dd"
                            @click="getTestRegistration"
                            :disabled="disabled"
                            >{{ text }}</van-button
                        >
                    </template>
                </van-field>

                <!-- 注册按钮 -->
                <div class="button-box">
                    <van-button
                        round
                        block
                        type="info"
                        native-type="submit"
                        color="linear-gradient(to right,#e652d8, #2b97fc)"
                        >注册</van-button
                    >
                </div>
            </van-form>
        </van-popup>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from 'vuex';

export default {
    name: "LogOn",
    data() {
        return {
            // 用户
            user: {
                // 手机号
                phone: "16676004993",
                // 密码
                password: "asd12378",
                //是否 明文显示 登录密码
                isShow: false,
            },

            // 是否展示 弹出层
            show: false,

            // 注册
            userRegister: {
                // 手机号
                phone: "",
                // 密码
                password: "",
                // 昵称
                nickName: "",
                // 验证码
                verification: "",
                //是否 明文显示 注册密码
                isShow: false,
            },

            // 手机号正则
            phoneReg: /^1[3-9]\d{9}$/,
            // 密码正则(必须以字母开头, 字母数字_组合[6-16])
            passwordReg: /^[A-Za-z]\w{5,15}$/,
            // 昵称正则(中英文数字下划线组合[1-16])
            nicknameReg: /^[\u4e00-\u9fa5A-Za-z0-9_]{1,16}$/,
            // 邮箱正则
            emailReg: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            // 验证码正则
            verificationReg: /^\d{4}$/,

            // 输入框 高亮下标
            field_bg: -1,

            // 禁止 发送验证码
            disabled: false,
            //注册 发送验证码按钮文本
            verificationText: "发送验证码",
        }
    },
    methods: {
        ...mapMutations(['LogOn_TB_Fn']),

        goHome() { this.$router.push({ name: "Home" }); },
        // 获取焦点
        focus(i) { this.field_bg = i; },
        // 失去焦点
        blur(i) { this.field_bg = -1; },
        // 展示 注册弹出层
        showPopup() { this.show = true; },
        //切换明文密码  t登录/f注册 
        showPassword(tf) {
            if (tf) {
                this.user.isShow = !this.user.isShow;
                this.focus(1);
            } else {
                this.userRegister.isShow = !this.userRegister.isShow;
                this.focus(3);
            }
        },

        // 请求登录
        getLogOn() {
            // 提示
            this.$toast.loading({
                message: '正在登录中...',
                forbidClick: true,
                duration: 0
            });

            // 发送请求
            this.axios({
                method: "GET",
                url: "/login/cellphone",
                params: {
                    phone: this.user.phone,
                    password: this.user.password
                }
            }).then((result) => {
                console.log("🚀 ==> getLogOn ==> result", result);
                // 关闭提示
                this.$toast.clear();

                // 登录成功
                if (result.data.code === 200) {
                    Toast.success({
                        message: '登录成功',
                        forbidClick: true,
                    });

                    // 用户数据 本地缓存
                    localStorage.setItem('uid', JSON.stringify(result.data.account.id));

                    setTimeout(() => {
                        // 跳转到 首页
                        this.$router.push({ name: 'Home' });
                    }, 1500)
                }
                // 密码错误
                else if (result.data.code === 502) {
                    Toast.fail(result.data.msg);
                }
            }).catch((err) => {
                this.$toast.clear();
                console.log("🚀 ==> getLogOn ==> err", err);
                // 请求失败
                Toast.fail({
                    message: "手机号或密码错误",
                    forbidClick: true,
                });
            });
        },

        // 请求 检测手机号码是否已注册
        getTestRegistration() {
            // 判断手机号码
            if (!this.phoneReg.test(this.userRegister.phone)) {
                Toast.fail({
                    message: '请填写正确的手机号',
                    forbidClick: true,
                });
                return
            }

            // 请求检测
            this.axios({
                method: "GET",
                url: "/cellphone/existence/check",
                params: { phone: this.userRegister.phone }
            }).then((result) => {
                console.log("🚀 ==> getTestRegistration ==> result", result);

                // 请求成功
                if (result.data.code === 200) {
                    // 没注册
                    if (result.data.exist === -1) {
                        // 请求发送验证码
                        this.getSendVerificationCode();
                    }
                    // 已注册
                    else if (result.data.exist === 1) {
                        Toast.fail({
                            message: "该手机号已经被注册",
                            forbidClick: true
                        });
                        // this.getSendVerificationCode();
                    }
                }
            }).catch((err) => {
                console.log("🚀 ==> getTestRegistration ==> err", err);
            });
        },

        // 发送验证码
        getSendVerificationCode() {
            // 禁止按钮
            this.disabled = true;

            // 请求发送验证码
            this.axios({
                method: "GET",
                url: "/captcha/sent",
                params: { phone: this.userRegister.phone }
            }).then((result) => {
                console.log("🚀 ==> getSendVerificationCode ==> result", result);

                // 请求成功
                if (result.data.code === 200) {
                    // 服务器发送成功
                    if (result.data.data) {
                        // 提示
                        Toast.success({
                            message: '发送成功,\n注意查收',
                            forbidClick: true,
                        });

                        // 定时器禁止按钮
                        let mm = 10;
                        this.timer = setInterval(() => {
                            // 解封按钮 关闭定时器
                            if (mm === -1) {
                                this.disabled = false;
                                clearInterval(this.timer);
                            }
                            //  修改按钮文本
                            this.verificationText = `${mm}秒后才可发送`;
                            mm--;
                        }, 1000);
                    }
                    else {
                        this.disabled = false;
                    }
                }
            }).catch((err) => {
                console.log("🚀 ==> getSendVerificationCode ==> err", err);
                this.disabled = false;
            });
        },

        // 验证验证码
        getVerificationVerificationCode() {
            // 发送请求
            this.axios({
                method: "GET",
                url: "/captcha/verify",
                params: {
                    phone: this.userRegister.phone,
                    captcha: this.userRegister.verification
                }
            }).then((result) => {
                console.log("🚀 ==> getVerificationVerificationCode ==> result", result);
                // 请求成功
                if (result.data.code === 200) {
                    // 验证码正确
                    if (result.data.data) {
                        // 请求注册
                        this.getRegister();
                    }
                }

            }).catch((err) => {
                console.log("🚀 ==> getVerificationVerificationCode ==> err", err);
                Toast.fail({
                    message: "验证码错误！",
                    forbidClick: true
                });
            });
        },

        // 注册
        getRegister() {
            this.axios({
                method: "GET",
                url: "/register/cellphone",
                params: {
                    captcha: this.userRegister.verification,
                    phone: this.userRegister.phone,
                    password: this.userRegister.password,
                    nickname: this.userRegister.nickName
                }
            }).then((result) => {
                console.log("🚀 ==> getRegister ==> result", result);

            }).catch((err) => {
                console.log("🚀 ==> getRegister ==> err", err);
                Toast.fail({
                    message: "接口有问题\n请前往网易云\n注册账号\n然后直接登录",
                    forbidClick: true
                });
            });
        },
    },
    computed: {
        // 调整按钮文本
        text() {
            if (!this.disabled) {
                this.verificationText = "发送验证码";
            }
            return this.verificationText
        }
    },

    // 初始化
    created() {
        this.LogOn_TB_Fn();
    },
}
</script>

<style lang="less" scoped>
.LogOn {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    // 背景图
    .bg {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: -1;
        background-image: url('../assets/logon.png');
        filter: blur(2px);
    }

    // go首页
    .goHome {
        position: absolute;
        width: 280px;
        height: 90px;
        top: -40px;
        left: -30px;
        background-color: #131226;
        display: flex;
        align-items: center;

        div {
            margin-left: 22px;
            width: 210px;
            height: 70%;
            background-image: url('../assets/Logo.png');
            background-size: contain;
            background-position: bottom center;
            background-repeat: no-repeat;
        }
        transform: rotate(-20deg);
    }

    // 标语
    .p-box {
        margin-top: 150px;
        padding-left: 15px;
        margin-bottom: 55px;

        .p1 {
            font-size: 36px;
            font-weight: 600;
            color: #fdfdfd;
        }

        .p2 {
            color: #eeeeee;
            margin-top: 25px;
            font-size: 20px;
        }
    }

    // 表单
    /deep/ .van-form {
        padding: 0 15px;

        .van-cell {
            background-color: rgba(255, 255, 255, 0.1);

            .van-field__label {
                color: #fff;
            }
            .van-cell__title {
                font-weight: 600;
            }
            i {
                color: #fff;
                font-size: 20px;
            }
        }
        .field_bg {
            background-color: rgba(255, 255, 255, 0.6);
            .van-field__label {
                color: #333366;
                font-size: 15px;
            }
        }

        // 忘记密码
        .forget-box {
            display: flex;
            margin-top: 26px;
            margin-bottom: 50px;
            color: #e99036;
            font-size: 14px;
            .forget {
                margin-left: auto;
            }
        }
    }
    .van-button {
        letter-spacing: 8px;
    }

    // 弹出盒
    /deep/.van-popup {
        background-image: url('../assets/logon.png');
        background-position: -280px -55px;

        .p3 {
            color: #fff;
            font-weight: 600;
            margin-top: 25px;
            margin-bottom: 140px;
            padding-left: 15px;
            font-size: 24px;
            letter-spacing: 20px;
        }
        .letterSpacing0 {
            letter-spacing: normal;
        }
        .van-form {
            padding: 0;
        }

        .button-box {
            position: relative;
            margin: 90px 0 15px;
            padding: 0 15px;
        }
    }
}
</style>